import React, { Component } from 'react'
import { NavBar, Icon, Carousel } from "antd-mobile";
import "./productdetails.css"
import myaxios from "../utils/myaxios"
export default class productdetails extends Component {
    constructor(props) {
        super(props)
        console.log(props)
    }
    state = {
        carousel: {},
    }
    componentDidMount() {
        let { goods_id } = this.props.match.params;
        myaxios
            .get("goods/detail", {
                params: {
                    goods_id
                },
            })
            .then((res) => {
                console.log(res);
                this.setState({
                    carousel: res
                });
            })
    }
    render() {
        return (
            <div className="productdetails">
                <div className="yg-index-nav">
                    <NavBar
                        className="yg-sc-nav"
                        mode="light"
                        icon={<Icon type="left" />}
                        onLeftClick={() => window.history.go(-1)}
                    >
                        商品详情
                    </NavBar>
                    {/* 轮播 */}
                    <Carousel
                        autoplay={false}
                        infinite
                    >
                        {this.state.carousel.pics && this.state.carousel.pics.map(v => {
                            return (
                                <div
                                    className="Viwepager"
                                    key={v.pics_id}
                                    style={{ width: '100%', verticalAlign: 'top', textAlign: "center", height: this.state.imgHeight }}
                                >
                                    <img
                                        className="Img"
                                        src={v.pics_big}
                                        alt=""
                                        style={{ width: '80%', verticalAlign: 'top' }}
                                        onLoad={() => {
                                            // fire window resize event to change height
                                            window.dispatchEvent(new Event('resize'));
                                            this.setState({ imgHeight: 'auto' });
                                        }}
                                    />
                                </div>
                            )
                        }
                        )
                        }
                    </Carousel>
                </div>
                {/* 价格 */}
                <div className="detail-price">
                    <div className="detail-price-left">
                        <p>￥<span>{this.state.carousel.goods_price}</span></p>
                    </div>
                    <div className="detail-price-right">
                        <i className="iconfont iconfenxiang "></i>
                        <i className="iconfont iconshoucang "></i>
                    </div>
                </div>
                {/* 商品信息 */}
                <div className="merchandise-news">
                    <span>{this.state.carousel.goods_name}</span>
                </div>
                {/*图片 */}
                <div className="Image-details">
                    <span>图文信息</span>
                        <div className="Photo-show"
                        dangerouslySetInnerHTML={{__html:this.state.carousel.goods_introduce}}>
                           
                        </div>
                </div>
            </div>
        )
    }
}
